<template>
    <view class="fixed-top">
        <view class="home-search-input common-flex-between">
            <view class="search-wrapper">
                <input class="uni-input"
                       @input="inputValue"
                       @confirm="confirmHandle"
                       :value="value"
                       :focus="focus"
                       confirm-type="search"
                       placeholder="搜索绘本" />
                <text class="icon-search"/>
                <view class="close one one-close" @tap.stop="clearHandle" v-if="!!searchValue"></view>
            </view>
            <text class="cancel-btn" @tap="cancelSearch">取消</text>
        </view>
    </view>
</template>

<script>
    export default {
        name: "search-input",
        props: {
            focus: {
                defalut: true,
                type: Boolean
            },
            placeholder: {
                defalut: '搜索绘本',
                type: String
            },
            value: {
                default: '',
                type: String
            }
        },
        data(){
            return {
                searchValue: ''
            }
        },
        watch: {
            value(newVal){
                this.searchValue = newVal;
            }
        },
        methods: {
            inputValue(event){
                let {value} = event.detail;
                this.searchValue = value;
                this.$emit('input', value);
            },
            confirmHandle(event){
                let {value} = event.detail;
                this.$emit('confirmSearch', value)
            },
            cancelSearch(){
                uni.navigateBack(-1);
            },
            clearHandle(){
                this.searchValue = '';
                this.$emit('input', '');
                this.$emit('confirmSearch', '');
            }
        }
    }
</script>

<style scoped lang="scss">
    .fixed-top{
        position: fixed;
        left: 0;
        top: 0;
        right: 0;
        height: 110rpx;
        background: #FFFFFF;
        z-index: 10;
    }
    .home-search-input{
        margin-top: 20rpx;
        margin-bottom: 20rpx;
        padding: 0 30rpx;
        box-sizing: border-box;
        align-items: center;
        .search-wrapper{
            position: relative;
            width: 580rpx;
            .uni-input{
                width: 580rpx;
                height: 68rpx;
                background: #F9F9F9;
                border-radius:40rpx;
                font-size:26rpx;
                color: #333333;
                padding: 0 40rpx 0 60rpx;
                box-sizing: border-box;
            }
            .icon-search, .close{
                position: absolute;
                left: 20rpx;
                top: 50%;
                transform: translateY(-50%);
            }
            .close{
                right: 20rpx;
                left: auto;
                z-index: 10;
                width: 44rpx;
                height: 44rpx;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                color: #fff;
                background: #c0c0c0;
            }
        }
        .cancel-btn{
            color: #333333;
        }
    }
</style>